<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:43:45
-->
<template>
<!-- 创建一个图标容器 容纳图标 -->
  <div ref="root" style="height:150px">
  </div>
</template>
<script>
import {Line} from '@antv/g2plot';
import {ref,onMounted} from 'vue';
export default {
  //vue3新特性 
  setup(){
    //暂时访问不到根节点root
    let root=ref(null);
    let line=null;
    //创建一个折线图实例对象
    let initCharts=()=>{
      //只需要给line进行赋值
      line=new Line(root.value,{
        data:[
          { day: '周一', value: 3 },
          { day: '周二', value: 4 },
          { day: '周三', value: 3.5 },
          { day: '周四', value: 5 },
          { day: '周五', value: 4.9 }
        ],
        xField:'day',
          yField:'value',
          color:"skyblue",
          tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
      });
      line.render();
    }
    onMounted(initCharts);
    return{
      root
    }
  }
}
</script>